<template>
  <el-dialog :model-value="modelValue" @update:modelValue="onClose" :close-on-click-modal="false" :title="computedConfig.title" append-to-body width="520px">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="70px">
      <el-form-item label="年度" prop="belongYear">
        <el-date-picker v-model="formData.belongYear" type="year" value-format="YYYY" placeholder="请选择年度" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="名称" prop="configName">
        <el-input v-model="formData.configName" placeholder="请输入称" maxlength="100"/>
      </el-form-item>
      <el-form-item label="状态" prop="enableStatus">
        <el-switch  v-model="formData.enableStatus" :active-valu="true" :inactive-value="false"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button :loading="loading" type="primary" @click="onSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import * as relatedApi from '@/api/Reimbursement/related-transaction.js'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {
        type: 'add',
        data: null
      }
    }
  }
})
const emits = defineEmits(['update:modelValue', 'success'])

const formRef = ref(null)
const formData = ref({
  id: '',
  belongYear: '',
  configName: '',
  enableStatus: true
})
const rules = ref({
  belongYear: [
    { required: true, message: '请选择年度', trigger: 'change' }
  ],
  configName: [
    { required: true, message: '请输入名称', trigger: 'change' }
  ]
})
const loading = ref(false)
const computedConfig = computed(() => {
  let typeMap = {
    add: '新增',
    edit: '编辑',
    copy: '复制'
  }
  return {
    title: typeMap[props.data.type || 'add'] + '关联交易',
  }
})

const onClose = () => {
  emits('update:modelValue', false)
}

const onSubmit = () => {
  loading.value = true
  formRef.value.validate().then(() => {
    let method = formData.value.id ? relatedApi.relatedTransactionEdit : relatedApi.relatedTransactionAdd

    if (props.data.type === 'copy') {
      method = relatedApi.relatedTransactionCopy
    }

    method({...formData.value}).then(() => {
      ElMessage.success('操作成功')
      emits('success')
      onClose()
    }).finally(() => {
      loading.value = false
    })
  }).finally(() => {
    loading.value = false
  })
}

watch(() => props.data,(val) => {
  val = val || {type: 'add', data: {}}
  for(let key in formData.value) {
    formData.value[key] = val.data[key]
  }

  if (val.type === 'add') {
    formData.value.enableStatus = true
  }

  formData.value.toCopyConfigId = ''
  if(val.type == 'copy') {
    formData.value.toCopyConfigId = val.data.id
    formData.value.id = ''
  }

  setTimeout(() => {
    if (formRef.value) {
      formRef.value.clearValidate()
    }
  }, 0);

})
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
</style>
